import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

// 导入 base.css
import './css/base.css'

// 导入组件
import Find from './views/Find.vue'
import My from './views/My.vue'
import Part from './views/Part.vue'
import NotFound from './views/NotFound.vue'

// 二级路由
import Recommend from './views/second/Recommend.vue'
import Ranking from './views/second/Ranking.vue'
import SongList from './views/second/SongList.vue'

// 三级路由
import One from './views/second/thirdly/One.vue'
import Two from './views/second/thirdly/Two.vue'
import Three from './views/second/thirdly/Three.vue'

// 1. 下包
// 2. 导入 vue-router
import VueRouter from 'vue-router'

// 3. 安装 VueRouter
Vue.use(VueRouter)

// 4. 路由规则数组 - 需先导入组件
const routes = [
  { path: '/', redirect: '/find/recommend/one' }, // 重定向 - redirect 重新定向到 Find
  {
    path: '/find',
    component: Find,
    name: 'Find',
    children: [
      // 二级路由 path 不用添加 /
      {
        path: 'recommend',
        component: Recommend,
        children: [
          // 三级路由 path 不用添加 /
          { path: 'one', component: One, name: 'One' },
          { path: 'two', component: Two, name: 'Two' },
          { path: 'three', component: Three, name: 'Three' }
        ]
      },
      { path: 'ranking', component: Ranking },
      { path: 'SongList', component: SongList }
    ]
  },
  { path: '/my', component: My, name: 'My' },
  { path: '/part', component: Part, name: 'Part' }, // 声明式导航传参 a=1&b=2 格式
  { path: '/part/:name/:age', component: Part }, // 声明式导航传参 path 格式
  { path: '*', component: NotFound }
]

// 5. 创建路由对象
const router = new VueRouter({
  routes,
  mode: 'history' // 默认是 hash ，history 需要服务器支持
})

// 全局前置守卫
let isLogin = true
router.beforeEach((to, from, next) => {
  if (!isLogin && to.path == '/my') {
    alert('傻逼登录去！')
    next(false) // 不放行
    return
  }
  next()
})

new Vue({
  render: h => h(App),
  // 6. 挂载到 Vue 实例中
  router
}).$mount('#app')
